<template>
  <KView class="goods-detail-image">
    <KSwiper class="goods-detail-image-swiper" v-model="currentIndex" :autoplay="true" :interval="10000" :circular="true" :indicator-dots="true">
      <KSwiperItem v-for="(pic,index) in picList" :key="`pic_${index}`" :item-id="`pic_${index}`">
        <KView class="goods-detail-image-item">
          <sys-image :src="pic" mode="auto"></sys-image>
        </KView>
      </KSwiperItem>
    </KSwiper>

    <KView class="goods-detail-btn">
      <detail-header :has-cart="hasCart" :has-share="hasShare" @to-back="toBack" @shop-cart="toShopCart"></detail-header>
    </KView>
  </KView>
</template>

<script>
  import SysImage from 'common/sysImage';
  import DetailHeader from './detailHeader';

  export default {
    props: {
      picList: {
        type: Array,
        required: true
      },
      hasCart: {
        type: Boolean,
        default: true
      },
      hasShare:{
        type: Boolean,
        default: true
      }
    },

    data() {
      return {
        currentIndex: 0
      };
    },

    methods: {
      toBack() {
        this.$emit('to-back');
      },

      toShopCart() {
        this.$emit('shop-cart');
      }
    },

    components: {
      SysImage,
      DetailHeader
    }
  };

</script>

<style lang="scss">
  .goods-detail-image {
    height: 100%;
    position: relative;

    .goods-detail-image-swiper {
      height: 100%;

      .goods-detail-image-item {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }

    .goods-detail-btn {
      position: absolute;
      top: formatPx(35);
      left: formatPx(30);
      right: formatPx(30);
      height: formatPx(70);
    }
  }

</style>
